iT邦幫忙

2021 iThome 鐵人賽

DAY 8
2
Modern Web

Angular 常見問題大小事系列 第 8

Angular Reactive Forms 自訂表單驗証器

  • 分享至 

  • xImage
  •  

中秋連假開始啦,先祝大家中秋節快樂!!
接連著前兩天的日記文插播,
今天就接續著先前還沒聊完的部份開始接續下去囉


有表單 當然少不了驗証,這次的情境是

名字是必填欄位。
手機不一定會是必填,但填了後必須符合手機的格式,09 開頭 共 10 碼

來囉!!


加上表單驗証

在這個 form 表單的下方 新增一個驗証方式,動態驗証就寫在 validator 這裡面

export class FormComponent implements OnInit {
  form: FormGroup = new FormGroup(
    {
      name: new FormControl("", Validators.required),
      phone: new FormControl(""),
      favorites: new FormArray([]),
    },
    { validators: validator }
  );
}

自訂驗証器

.ts

export const validator: ValidatorFn = (
  control: AbstractControl
): ValidationErrors | null => {
  const { name, phone, favorites } = control.value;
  // 手機號碼正規化
  const regPhone = RegExp(/^09[0-9]{8}$/);
  return !phone ? null : regPhone.test(phone) ? null : { phone: true };
};

若是號碼填寫錯誤,把 form 的 console 叫出來 會是像圖上這樣

一開始我們有設定名字為必填,圖上紅色框起來就是沒填到名字所出現的訊息

若無誤則會是 null,這樣我們就可以在 tmeplate 上做顯示讓使用使知道表單哪裡有問題


把錯誤訊息 show 出來!

在 html 裡加上錯誤訊息

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="">name:</label>
    <input formControlName="name" type="text" />
    <!-- 錯誤訊息判斷 -->
    <p style="color:red" *ngIf="form.get('name')?.errors?.required">
      Name Required
    </p>
  </div>
  <div>
    <label for="">phone:</label>
    <input formControlName="phone" type="tel" />
  </div>
  ...略
  <!-- 錯誤訊息判斷 -->
  <p style="color:red" *ngIf="form.errors?.phone">Your phone Error</p>
  <button type="submit">Submit</button>
</form>

下圖為判斷 form 裡的驗証訊息,來決定要不要讓表單送出

參考文件:

把自訂驗證器新增到響應式表單中
https://angular.tw/api/forms/ValidatorFn


後記:
本來是有點懶的打這篇的,但前幾天,同事對我說,之後我們的表單都要有動態驗証哦!
我....嗯,...好 XDDD 然後就把久遠的回憶翻回來,再次熟悉了一下,這篇因此而生


上一篇
程式碼流程規劃之...日記文
下一篇
Angular 冒泡事件
系列文
Angular 常見問題大小事31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言